<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
<div style="overflow: auto; height: 350px; width: 860px; padding: 10px;">
  <table cellpadding="1" id="tab" cellspacing="0" bordercolor="black" border="1"
      style="text-align: center">
      <tr id="tr1">
          <td>
                
          </td>
          <td>
                
          </td>
          <td>
                
          </td>
          <td>
                
          </td>
          <td>
                
          </td>
      </tr>
      <!-- <tr id="trHeader">
          <td style="background: #D3E6FE">
              NO
          </td>
          <td style="background: #D3E6FE">
              试验项目
          </td>
          <td style="background: #D3E6FE">
              检验项目
          </td>
          <td style="background: #D3E6FE">
              标准
          </td>
          <td style="background: #D3E6FE">
              1
          </td>
      </tr> -->
      <tr>
          <td>
              1
          </td>
          <td>
              <input id='textItem0' type='text' style="border: 0px" size='12' />
          </td>
          <td>
              <input id='checkItem0' type='text' style="border: 0px" size='12' />
          </td>
          <td>
              <input id='stand0' type='text' style="border: 0px" size='12' />
          </td>
          <td>
              <textarea rows="4" id="" style="width: 150px; height: 20px;"></textarea>
          </td>
      </tr>
  </table>
  <table cellpadding="1" cellspacing="0" bordercolor="#A3C0E8" border="1" style="text-align: center">
      <tr>
          <td style="background: #D3E6FE">
          </td>
          <td style="background: #D3E6FE">
              <input type="button" name="Submit" value="新增行" onclick="AddNewRow()" />
          </td>
          <td style="background: #D3E6FE">
              <input type="button" name="Submit" value="新增列" onclick="AddNewColumn()" />
          </td>
          <td style="background: #D3E6FE">
              <input type="button" name="Submit2" value="全部清空" onclick="ClearAllSign()" />
          </td>
          <td style="background: #D3E6FE">
              <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
              <input name='txtTDLastIndex' type='hidden' id='txtTDLastIndex' value="4" />
          </td>
      </tr>
  </table>
  <script language="javascript" type="text/javascript">
 
    function findObj(theObj, theDoc) {
        var p, i, foundObj;
        if (!theDoc) theDoc = document;
        if ((p = theObj.indexOf("?")) > 0 && parent.frames.length) {
            theDoc = parent.frames[theObj.substring(p + 1)].document; theObj = theObj.substring(0, p);
        }
        if (!(foundObj = theDoc[theObj]) && theDoc.all)
            foundObj = theDoc.all[theObj]; for (i = 0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for (i = 0; !foundObj &&
theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj, theDoc.layers[i].document);
        if (!foundObj && document.getElementById)
            foundObj = document.getElementById(theObj); return foundObj;
    }

    //添加一个列
    count = 1;
    function AddNewColumn() {
        var txtTDLastIndex = findObj("txtTDLastIndex", document);
        var columnID = parseInt(txtTDLastIndex.value);

        var tab = document.getElementById("tab");
        var rowLength = tab.rows.length;
        var columnLength = tab.rows[1].cells.length;

        for (var i = 0; i < rowLength; i++) {
            if (i == 0) {
                var oTd = tab.rows[0].insertCell(columnLength);
                oTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' onclick=\"DeleteSignColumn(" + (++columnID) + ")\">删除</a></div>";
            } else if (i == 1) {//第一列:序号
                var oTd = tab.rows[1].insertCell(columnLength);
                oTd.innerHTML = "<div style='background: #D3E6FE;width=100%;'>" + (++count) + "</div>";
            } else if (i > 1) {
                var oTd = tab.rows[i].insertCell(columnLength);
                oTd.id = "column" + columnID;
                oTd.innerHTML = "<textarea id=''  rows='4' style='width:150; height:40px;'></textarea>";
            }
        }

    }

    //添加一个行
    var index = 1;
    function AddNewRow() {
        var txtTRLastIndex = findObj("txtTRLastIndex", document);
        var rowID = parseInt(txtTRLastIndex.value);

        var tab = findObj("tab", document);
        var columnLength = tab.rows[0].cells.length;

        //添加行
        var newTR = tab.insertRow(tab.rows.length);
        newTR.id = "SignItem" + rowID;

        for (var i = 0; i < columnLength; i++) {
            if (i == 0) {//第一列:序号
                newTR.insertCell(0).innerHTML = ++index;
            } else if (i > 0 && i < 4) {
                newTR.insertCell(i).innerHTML = "<input id='textItem0' type='text' style='border: 0px' size='12' />";
            }
            else if (i >= 4) {
                newTR.insertCell(i).innerHTML = "<input id=''  rows='4' style='width:150; height:20px;'></input>";
            }
        }

        //添加列:删除按钮
        var lastTd = newTR.insertCell(columnLength);
        lastTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";

        //将行号推进下一行
        txtTRLastIndex.value = (rowID + 1).toString();
    }

    //删除指定行
    function DeleteSignRow(rowid) {
        var tab = findObj("tab", document);
        var signItem = findObj(rowid, document);

        //获取将要删除的行的Index
        var rowIndex = signItem.rowIndex;

        //删除指定Index的行
        tab.deleteRow(rowIndex);


        //重新排列序号，如果没有序号，这一步省略
        for (i = 2; i < tab.rows.length; i++) {
            tab.rows[i].cells[0].innerHTML = i - 1;
        }

        --index
    }

    //删除指定列
    function DeleteSignColumn(columnId) {
        var tab = document.getElementById("tab");
        var columnLength = tab.rows[1].cells.length;

        //删除指定单元格 
        for (var i = 0; i < tab.rows.length; i++) {
            tab.rows[i].deleteCell(columnId);
        }

        //重新排列序号，如果没有序号，这一步省略
        var column = columnLength - 4;

        for (var j = 1; j < column; j++) {
            tab.rows[1].cells[j + 3].innerHTML = "<div style='background: #D3E6FE;width=100%;'>" + j + "</div>";
        }

        --count;
    }


    //清空列表
    function ClearAllSign() {
        //if (confirm('确定要清空所有吗？')) {
        index = 0;
        var tab = findObj("tab", document);
        var rowscount = tab.rows.length;

        //循环删除行,从最后一行往前删除
        for (i = rowscount - 1; i > 1; i--) {
            tab.deleteRow(i);
        }

        //重置最后行号为1
        var txtTRLastIndex = findObj("txtTRLastIndex", document);
        txtTRLastIndex.value = "1";

        //预添加一行
        AddNewRow();
        //}
    }
</script>
</div>
</body>
</html>